<template>
  <el-header class="right-header" height="max-content">
    <Header />
  </el-header>
  <div class="container-box">
    <el-card class="px-8 py-2 my-2">
      <div class="flex items-center justify-between">
        <div>
          <p class="mb-4 text-[#000] text-xl">{{ $t("登录密码") }}</p>
          <span class="text-[#434950]">{{ $t("设定密码说明") }}</span>
        </div>
        <el-button @click="psdChange">{{ $t("更改") }}</el-button>
      </div>
    </el-card>

    <el-card class="px-8 py-2 my-4">
      <div class="flex items-center justify-between">
        <div>
          <p class="mb-4 text-[#000] text-xl">{{ $t("交易密码") }}</p>
          <span class="text-[#434950]">{{ $t("设定密码说明") }}</span>
        </div>

        <el-button @click="isShowPayPwdDrawer = true">{{
          isHasPayPwd == 1 ? $t("更改") : $t("设置")
        }}</el-button>
      </div>
    </el-card>

    <!-- <el-card class="px-8 py-2 my-2" v-if="isGoogleBind !== 1">
      <div class="flex items-center justify-between">
        <div>
          <p class="mb-4 text-[#000] text-xl">{{ $t("验证器") }}</p>
          <span class="text-[#434950]">{{ $t("验证器说明") }}</span>
        </div>
        <div class="flex flex-col justify-center item-center">
          <router-link to="/validator">
            <el-button>{{
              isGoogleBind === 1 ? $t("编辑") : $t("设置")
            }}</el-button>
          </router-link>
        </div>
      </div>
    </el-card>
    <el-card class="px-8 py-2 my-2" v-if="isGoogleBind === 1">
      <div class="flex items-center justify-between">
        <div>
          <p class="mb-4 text-[#000] text-xl">
            {{ $t("验证器") }}
          </p>
          <span class="text-[#434950]">{{ $t("验证器说明") }}</span>
        </div>
        <div class="flex flex-col justify-center item-center">
          <div class="flex justify-center w-full">
            <el-switch
              v-model="opt_type"
              size="large"
              @change="(val) => onSwitchChange(val, opt_type)"
              style="
                --el-switch-on-color: #ff4949;
                --el-switch-off-color: #ccc;
                width: 100%;
                display: inline-block;
              "
            />
          </div>
          <el-button @click="handleClickCreate">{{ $t("编辑") }}</el-button>
        </div>
      </div> -->
    <!-- <div class="my-5">
        <div class="flex items-center justify-between mb-2">
          <span>{{ $t("在进行下列操作时需要双重身份验证") }}</span>
        </div>
        <div class="flex items-center justify-between">
          <span>{{ $t("登陆") }}</span>
          <el-switch
            v-model="google_open.login"
            @change="onSwitchChange(google_open.login, 'login', 1)"
            :disabled="google_open.login > 0"
          />
        </div>
        <div class="flex items-center justify-between">
          <span>{{ $t("退款") }}</span>
          <el-switch
            v-model="google_open.refund"
            @change="onSwitchChange(google_open.refund, 'refund', 2)"
          />
        </div>
        <div class="flex items-center justify-between">
          <span>{{ $t("付款") }}</span>
          <el-switch
            v-model="google_open.pay"
            @change="onSwitchChange(google_open.pay, 'pay', 8)"
          />
        </div>
        <div class="flex items-center justify-between">
          <span>{{ $t("提现") }}</span>
          <el-switch
            v-model="google_open.withdraw"
            @change="onSwitchChange(google_open.withdraw, 'withdraw', 16)"
          />
        </div>
        <div class="flex items-center justify-between">
          <span>{{ $t("客户管理") }}</span>
          <el-switch
            v-model="google_open.kyc_manage"
            @change="onSwitchChange(google_open.kyc_manage, 'kyc_manage', 32)"
          />
        </div>
        <div class="flex items-center justify-between">
          <span>{{ $t("VA账户") }}</span>
          <el-switch
            v-model="google_open.va"
            @change="onSwitchChange(google_open.va, 'va', 64)"
          />
        </div>
      </div> 
    </el-card>-->
  </div>
  <DialogForm
    @closeDialog="closeDialog"
    :dialogVisible="dialogVisible"
    :isSetGoogle="isSetGoogle"
    @callApi="handleGoogleAuthApi"
  />
  <setPayPasswordDrawer
    :show="isShowPayPwdDrawer"
    :drawerTitle="isHasPayPwd == 1 ? $t('修改交易密码') : $t('设置交易密码')"
    :codeType="isHasPayPwd == 1 ? 'modify' : 'set'"
    @close="closePayPwdDrawer"
  />
  <ChangePassword :show="isShowPsdDrawer" @close="isShowPsdDrawer = false" />
</template>
<script setup>
// 获取谷歌验证器密钥googleAuthSecretApi
// 绑定谷歌验证器bindGoogleAuthApi
// 校验google验证器checkGoogleAuthApi
// 打开google验证器选项openGoogleAuthApi
import setPayPasswordDrawer from "./components/setPayPasswordDrawer.vue";
import ChangePassword from "./components/ChangePassword.vue";
import {
  openGoogleAuthNewApi,
  checkGoogleAuthNewApi,
} from "@/api/gooleSettings/index";
import { ref, onMounted, watch, computed } from "vue";
import { GetNewMerchantInfo } from "@/api/merchant/index";
import DialogForm from "./components/DialogForm.vue";
import { useRouter } from "vue-router";
import { useMerchantStore } from "@/store/modules/merchant";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const merchantStore = useMerchantStore();
const router = useRouter();
const dialogVisible = ref(false);
const isShowPayPwdDrawer = ref(false);
const isHasPayPwd = ref();
const closePayPwdDrawer = async () => {
  const res = await GetNewMerchantInfo();
  isHasPayPwd.value = res.is_tradepwd;
  isShowPayPwdDrawer.value = false;
};
const isGoogleBind = ref(false);

// 打开窗口
const handleClickCreate = () => {
  dialogVisible.value = true;
  isSetGoogle.value = false;
};
// 关闭窗口
const closeDialog = () => {
  dialogVisible.value = false;
  isSetGoogle.value = false;
};

const opt_type = ref("1");

const isSetGoogle = ref(false);

const onSwitchChange = async (val) => {
  if (opt_type.value == 0) {
    dialogVisible.value = true;
    isSetGoogle.value = true;
  } else {
    await openGoogleAuthNewApi({ opt_type: opt_type.value });
    await merchantStore.getMerchantInfo();
    ElMessage.success(t(`谷歌验证已${opt_type.value == 1 ? "开启" : "关闭"}`));
    dialogVisible.value = false;
  }
};
onMounted(() => {
  try {
    // const res = await GetNewMerchantInfo();
    GetNewMerchantInfo().then((res) => {
      isGoogleBind.value = res.is_bind_google_auth;
      isHasPayPwd.value = res.is_tradepwd;
      opt_type.value = res.is_google_auth_open == 0 ? false : true;
    });
  } catch (error) {
    console.error(error);
  }
});
//验证器
const handleGoogleAuthApi = async (code, flag) => {
  if (flag) {
    await openGoogleAuthNewApi({ opt_type: opt_type.value, code });
    await merchantStore.getMerchantInfo();
    ElMessage.success(t(`谷歌验证已${opt_type == 1 ? "开启" : "关闭"}`));
    dialogVisible.value = false;
  } else {
    try {
      const res = await checkGoogleAuthNewApi({ code });
      router.replace(`/validator`);
    } catch (error) {}
  }
};
// const onSwitchChange = async (value, key, optValue) => {
//   const optType = value ? 1 : 0;
//   try {
//     await openGoogleAuthNewApi({ opt_type: optType, opt_value: optValue });
//     await merchantStore.getMerchantInfo();
//   } catch (error) {
//     console.error(error);
//   }
// };
const isShowPsdDrawer = ref(false);
const psdChange = () => {
  isShowPsdDrawer.value = true;
};
</script>
